<template>
  <div>

    <MyTable :arr='list'>
      <template #tou>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template v-slot:db="{rou:obj, ind:index }">
        <td>{{obj.id}}</td>
        <td>{{obj.goods_name}}</td>
        <td>{{obj.goods_price}}</td>
        <td>
          <input class="tag-input form-control" type="text" v-if="obj.inputVisible" v-fof
            @blur="obj.inputVisible = false" @keyup.enter="addFn(obj) " v-model="obj.inputValue" @keyup.esc="btn3(obj)">
          <button class="btn btn-primary btn-sm add-tag" @click="obj.inputVisible=true">+Tag</button>
          <span v-for="(tag,index) in obj.tags" :key="index" class="badge badge-warning">{{ tag }}</span></td>
        <td>
          <button @click="btn(index)" class="btn btn-danger btn-sm

">删除</button></td>
      </template>
    </MyTable>
  </div>
</template>

<script>
  import MyTable from '../components/MyTable'
  import axios from 'axios'
  axios.defaults.baseURL = "https://www.escook.cn"

  export default {

    directives: {
      fof: {
        inserted(el) {
          el.focus()
        }
      }
    },

    data() {
      return {
        list: []
      }
    },
    components: {
      MyTable
    },
    async created() {
      const res = await axios({

        url: "/api/goods"
      })
      console.log(res);
      this.list = res.data.data
    },
    methods: {
      btn(index) {
        this.list.splice(index, 1)
      },
      addFn(obj) {
        if (obj.inputValue.trim().length == 0) {
          alert('111111111111111111')
        } else {
          obj.inputValue = ''
          obj.inputVisible = false
        }



      },
      btn3(obj) {
        obj.inputValue = ''
      }
    }
  }
</script>
<style scoped>
  .badge {
    margin-right: 5px;
  }

  td .btn {
    margin: 5px;
  }
</style>